<template>
	<view class="page"  :style="{ 'padding-top':mt+'px'}">
		<c-nav-bar :title="titleHeader"></c-nav-bar>
		<view class="search">
			<view class="box">
				<image class="ss" src="@/static/index/steamerTicket/icon_search.jpg"></image>
				<input type="text" placeholder="请输入景点/美食/住宿名搜索" v-model="keyword" @confirm="search">
				<image class="qc" src="@/static/index/steamerTicket/icon_close.jpg" @tap="clear"></image>
			</view>
		</view>
		<view class="searchCondition">
			<view :class="['item',tagIndex==index?'itemSelected':'']" v-for="(item,index) in searchConditionList"
				:key="index" @click="changeTags(index)">
				<image :src="item.srcActive" mode="aspectFill"></image>
				<span>{{item.name}}</span>
			</view>
			<!-- <view class="badge">
					<u-badge type="error" max="99" :value="value"></u-badge>
				</view>
				<view class="badge1">
					<u-badge type="error" max="99" :value="value1"></u-badge>
				</view>
				<view class="badge2">
					<u-badge type="error" max="99" :value="value2"></u-badge>
				</view> -->
		</view>
		<!-- 景点 -->
		<u-checkbox-group @change="(val)=>{
			checkboxChange(val,0)
		}" v-model="travelValue" placement="column" class="checkGroup" v-if="tagIndex==0">
			<view class="list" v-for="(item,index) in travelList" :key="index" @click="goToDetail(item)">
				<u-checkbox activeColor="#007A69" :customStyle="{marginBottom: '8px',padding:'10rpx'}" shape="circle" size='40' iconSize='32' :name="index">
				</u-checkbox>
				<image :src="item.generalSpot.coverImage" mode="aspectFill" style="height: 160rpx;width: 89px;border-radius: 10rpx;">
				</image>
				<view class="right">
					<view class="p1">{{item.name}}</view>
					<view class="p2">
						<!-- <text>距离市中心103.6km</text> -->
						<block v-if="item.generalSpot.clockFlag==1&&!item.generalSpot.spotId">
							<view v-if="ss.generalSpot.suggestTime">建议游玩{{ss.generalSpot.suggestTime}}</view>
						</block>
						<block v-else>
							<view class="forFree" v-if="item.generalSpot.startPrice==0">
								<span>免费</span>
							</view>
							<view class="price1" v-else>
								<span>￥</span>
								<span>{{item.generalSpot.startPrice}}</span>
								<span>起</span>
							</view>
						</block>
					</view>
					<view class="p3">
						<text class="intro">{{item.generalSpot.address||''}}</text>
						<view class="price" v-if="item.generalSpot.clockFlag!=1||item.generalSpot.spotId">
							<text>查看 ></text>
						</view>
					</view>
				</view>
			</view>
		</u-checkbox-group>
		<!-- 美食 -->
		<u-checkbox-group @change="(val)=>{
			checkboxChange(val,1)
		}" v-model="foodValue" placement="column" class="checkGroup" v-if="tagIndex==1">
			<block v-if="foodList&&foodList.length>0">
				<view class="list" v-for="(item,index) in foodList" :key="index" @click="goToFood(item)">
					<u-checkbox activeColor="#007A69" :customStyle="{marginBottom: '8px',padding:'10rpx'}" shape="circle" size='40' iconSize='32' :name="index">
					</u-checkbox>
					<image :src="item.generalSpot.coverImage" mode="aspectFill"
						style="height: 160rpx;width: 89px;border-radius: 10rpx;">
					</image>
					<view class="right1">
						<view class="p1">{{item.name}}</view>
						<view class="p2">
					<!-- 		<u-rate readonly inactiveColor='#FF7D01' size='30' :count="item.generalSpot.score"
								v-model="valueeee" activeColor='#FF7D01'></u-rate> -->
							<u-rate readonly inactiveColor='#FF7D01' size='30' count="5"
								v-model="item.generalSpot.score" activeColor='#FF7D01'></u-rate>
							<view class="price1">
								<span>人均￥</span>
								<span>{{item.generalSpot.startPrice}}</span>
							</view>
						</view>
						<view class="p3"><text class="intro">{{item.generalSpot.address}}</text>
							<view class="price">
								<text>查看 ></text>
							</view>
						</view>

					</view>
				</view>
			</block>
			<block v-else>
				<view class="zwrzsh">
					暂无入驻商户
				</view>
			</block>
		</u-checkbox-group>
		<!-- 住宿 -->
		<u-checkbox-group @change="(val)=>{
			checkboxChange(val,2)
		}" v-model="stayValue" placement="column" class="checkGroup" v-if="tagIndex==2">
			<block v-if="stayList&&stayList.length>0">
				<view class="list" v-for="(item,index) in stayList" :key="index" @click="goToStay(item)">
					<u-checkbox activeColor="#007A69" :customStyle="{marginBottom: '8px',padding:'10rpx'}" shape="circle" size='40' iconSize='32' :name="index">
					</u-checkbox>
					<image :src="item.generalSpot.coverImage" mode="aspectFill"
						style="height: 160rpx;width: 184rpx;border-radius: 10rpx;">
					</image>
					<view class="right2">
						<view class="p1">{{item.name}}</view>
						<view class="p2" v-if="item.generalSpot.startPrice">
							<view class="price1">
								<span style="color: #FF4141;font-size: 24rpx;">￥</span>
								<span style="color: #FF4141;font-size: 32rpx;">{{item.generalSpot.startPrice}}</span>
								<span style="font-size: 24rpx;">起</span>
							</view>
						</view>
						<view class="p3"><text class="intro">{{item.generalSpot.address}}</text>
							<view class="price">
								<text>查看 ></text>
							</view>
						</view>
					</view>
				</view>
			</block>
			<block v-else>
				<view class="zwrzsh">
					暂无入驻商户
				</view>
			</block>
		</u-checkbox-group>
		<!-- 购物 -->
		<!-- <u-checkbox-group @change="(val)=>{
			checkboxChange(val,3)
		}" v-model="shopValue" placement="column" class="checkGroup" v-if="tagIndex==3">
			<view class="list" v-for="(item,index) in shopList" :key="index"
				@click="showInfo(item.generalSpot.infoIntroduce)">
				<u-checkbox activeColor="#007A69" :customStyle="{marginBottom: '8px',padding:'10rpx'}" shape="circle" size='40' iconSize='32' :name="index">
				</u-checkbox>
				<image :src="item.generalSpot.coverImage" mode="aspectFill"
					style="height: 160rpx;width: 184rpx;border-radius: 10rpx;">
				</image>
				<view class="right2">
					<view class="p1">{{item.name}}</view>
					<view class="p3">
						<text class="intro">{{item.generalSpot.infoIntroduce}}</text>
						<view class="price">
							<text>查看 ></text>
						</view>
					</view>
				</view>
			</view>
		</u-checkbox-group> -->
		<u-modal @confirm='()=>{
							this.infoShow=false
						}' @close='()=>{
							this.infoShow=false
						}' :closeOnClickOverlay="true" :show="infoShow" title="详情" :content='info'></u-modal>

		<view class="operation">
			<view>已选{{value}}个</view>
			<u-button class="btn" @click="addPort()" type="primary" size="large" :disabled="disabled" text="确定"
				shape="circle"></u-button>
		</view>
	</view>
</template>

<script>
	import store from '../../store/index.js'
	export default {
		data() {
			return {
				// h:uni.getSystemInfoSync().windowHeight - 87,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				titleHeader: '自定义旅游路线',
				infoShow: false,
				info: '',
				stayValue: [],
				foodValue: [],
				travelValue: [],
				shopValue: [],
				limit: 10,
				page: 1,
				tripSelected: [],
				staySelected: [],
				foodSelected: [],
				tagIndex: 0,
				value: 0,
				value0: 0,
				value1: 0,
				value2: 0,
				value3: 0,
				disabled: true,
				keyword: '',
				wholeSelected: {},
				searchConditionList: [{
					name: '景点',
					src: 'https://i.ringzle.com/file/20240226/e645b6082d234d5d8f9b1bef7df8e599.png',
					srcActive: 'https://i.ringzle.com/file/20240226/e645b6082d234d5d8f9b1bef7df8e599.png',
				}, {
					name: '美食',
					src: 'https://i.ringzle.com/file/20240226/7144727ac3f2458e858a95383838c042.png',
					srcActive: 'https://i.ringzle.com/file/20240226/7144727ac3f2458e858a95383838c042.png',
				}, {
					name: '住宿',
					src: 'https://i.ringzle.com/file/20240226/306dff959e6f436ea41296abec66131a.png',
					srcActive: 'https://i.ringzle.com/file/20240226/306dff959e6f436ea41296abec66131a.png',
				}, 
				// {
				// 	name: '购物',
				// 	srcActive: 'https://i.ringzle.com/file/20240226/d9618c1318b94dd2bdf4eeb823cbadbc.png',
				// }, 
				],
				areaShow: false,
				area: ['所有', '泗礁岛', '嵊山岛', '黄龙岛', '枸杞岛', '小洋山岛', '花鸟岛', '大洋山岛'],
				areaInd: 0,
				areaVal: '',
				pricesort: 'up',
				list: ['@/static/scenicSpots/banner.png'],
				travelList: [],
				foodList: [],
				stayList: [],
				shopList: [],
				selectedItem3: [],
				selectedItem1: [],
				selectedItem2: [],
				tripList: [],
				valueeee: 2,
				islandIds2:[],
				tagType:1,
				isOver:false
			}
		},
		onLoad(option) {
			if(option.islandIds) this.islandIds2 = option.islandIds;
			this.getCusSpotPage(1)
		},
		onReachBottom() {
			if(this.isOver) return;
			this.getCusSpotPage(this.tagType,this.keyword);
		},
		methods: {
			getDistance() {
				var lng1 = e.data.data.position[0]
				var lat1 = e.data.data.position[1]
				var lng2 = sessionStorage.getItem("mylon")
				var lat2 = sessionStorage.getItem("mylat")
				var radLat1 = lat1 * Math.PI / 180.0;
				var radLat2 = lat2 * Math.PI / 180.0;
				var a = radLat1 - radLat2;
				var b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0;
				var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
					Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
				s = s * 6378.137; // EARTH_RADIUS;
				s = Math.round(s * 10000) / 10000;
				s = s * 1000
				if (isNaN(s)) {
					return 0 + 'm';
				}
				if (s > 1000) {
					//    大于1000米时
					s = Math.floor(s / 1000 * 100) / 100;
					s = s + 'km'
				} else {
					//    小于1000米直接返回
					s = s + 'm'
				}
				this.distance = s
			},
			showInfo(params) {
				this.infoShow = true
				this.info = params
			},
			search() {
				this.page = 1;
				switch (this.tagIndex) {
					case 0:
						this.travelList = [];
						this.getCusSpotPage(1, this.keyword)
						break
					case 1:
						this.foodList = [];
						this.getCusSpotPage(3, this.keyword)
						break
					case 2:
						this.stayList = [];
						this.getCusSpotPage(2, this.keyword)
						break
					case 3:
						this.shopList = [];
						this.getCusSpotPage(11, this.keyword)
						break
				}
			},
			clear() {
				this.keyword = '';
				this.page = 1;
				switch (this.tagIndex) {
					case 0:
						this.travelList = [];
						break
					case 1:
						this.foodList = [];
						break
					case 2:
						this.stayList = [];
						break
					case 3:
						this.shopList = [];
						break
				}
				this.getCusSpotPage(this.tagIndex)
				this.changeTags(this.tagIndex)
			},
			goToDetail(item) {
				if(item.generalSpot.clockFlag==1&&!item.generalSpot.spotId) return;
				
				uni.removeStorageSync('spid_old');
				uni.removeStorageSync('price_old');
				uni.removeStorageSync('jdIsBuy');
				uni.setStorageSync('spid_old', item.generalSpot.mapId);
				uni.setStorageSync('price_old', item.generalSpot.startPrice);
				uni.setStorageSync('jdIsBuy', item.generalSpot.isBuy);
				uni.navigateTo({
					url: '/pagesTrip/scenicSpots/spotDetail'
				})
			},
			goToFood(ss) {
				const caipid = ss.generalSpot.mapId
				uni.navigateTo({
					url: '/pagesTrip/fineFood/details/details?caipid=' + caipid
				})
				// uni.navigateTo({
				// 	url: "/pagesTrip/fineFood/details/details?list=" + JSON.stringify({
				// 		...ss
				// 	})
				// })
			},
			goToStay(ss) {

				// 获取当前日期
				var today = new Date();

				// 格式化当前日期为 'YYYY-MM-DD' 的形式
				var formattedToday = this.formatDate(today);
				// 获取第二天的日期
				var tomorrow = new Date();
				tomorrow.setDate(tomorrow.getDate() + 1);
				// 格式化第二天的日期为 'YYYY-MM-DD' 的形式
				var formattedTomorrow = this.formatDate(tomorrow);
				let list = [{
					homestayId: ss.generalSpot.spotId,
					leaveDate: formattedTomorrow,
					arriveDate: formattedToday
				}]
				uni.navigateTo({
					url: '/pagesTrip/hotel/details/index?list=' + JSON.stringify(list)
				})
			},
			formatDate(date) {
				var year = date.getFullYear();
				var month = (date.getMonth() + 1).toString().padStart(2, '0');
				var day = date.getDate().toString().padStart(2, '0');
				return year + '-' + month + '-' + day;
			},
			getTraveLList(param) {
				this.$api.get('/api/customrec/queryCustomScenicSpotPage', {
					limit: this.limit,
					page: this.page,
					name: param || ''
				}).then(({
					data: res
				}) => {
					if (res.msg == 'success') {
						this.travelList = res.data.list
						this.travelList.forEach(t => t.infoIntroduce = t.infoIntroduce?(t.infoIntroduce.substr(0, 16) + '...'):'');

					}
				})
			},
			onClose() {
				this.$set(this, 'areaShow', false)
			},
			scrolltolower() {
				this.loadmore();
			},
			loadmore() {
			},
			complete() {
				this.areaVal = this.area[this.areaInd];
				this.onClose()
			},
			// toHref(coverImage) {
			// 	uni.navigateTo({
			// 		url: url
			// 	})
			// }
			checkboxChange(val, type) {
				switch (type) {
					case 0:
						this.value0 = val.length
						this.value = this.value0 + this.value1 + this.value2 + this.value3
						// this.selectedItem3 = this.selectedItem(val, this.travelList)
						// var badgeValue = val.length + ''
						// this.value = badgeValue
						break
					case 1:
						this.value1 = val.length
						this.value = this.value0 + this.value1 + this.value2 + this.value3
						// this.selectedItem1 = this.selectedItem(val, this.foodList)
						// var badgeValue = val.length + ''
						// this.value1 = badgeValue
						break
					case 2:
						this.value2 = val.length
						this.value = this.value0 + this.value1 + this.value2 + this.value3
						// this.selectedItem2 = this.selectedItem(val, this.stayList)
						// var badgeValue = val.length + ''
						// this.value2 = badgeValue
						break
					case 3:
						this.value3 = val.length
						this.value = this.value0 + this.value1 + this.value2 + this.value3
						// this.selectedItem2 = this.selectedItem(val, this.stayList)
						// var badgeValue = val.length + ''
						// this.value2 = badgeValue
						break
				}
			},
			checkboxChange1(val) {
				this.value1 = val.length
				this.value = this.value0 + this.value1 + this.value2
			},
			changeTags(index) {
				this.tagIndex = index;
				this.page = 1;
				switch (index) {
					case 0:
						this.tagType = 1;
						this.travelList = [];
						this.getCusSpotPage(1, this.keyword)
						break
					case 1:
						this.tagType = 3;
						this.foodList = [];
						this.getCusSpotPage(3, this.keyword)
						break
					case 2:
						this.tagType = 2;
						this.stayList = [];
						this.getCusSpotPage(2, this.keyword)
						break
					case 3:
						this.tagType = 11;
						this.shopList = [];
						this.getCusSpotPage(11, this.keyword)
						break
				}
			},
			getCusSpotPage(type, name) {
				this.$api.get('/api/customrec/selectCusSpotPage', {
					page: this.page,
					limit: this.limit,
					type,
					name: name || '',
					islandIds:this.islandIds2
				}).then(({
					data: res
				}) => {
					if (res.code == 0) {
						this.page++;
						let { list, total } = res.data;
						switch (type) {
							case 1:
								if (this.travelList.length + list.length > total || list.length == 0) return this.isOver = true;
								this.travelList = [...this.travelList, ...list];
								this.travelList.forEach(t => t.infoIntroduce = t.infoIntroduce?(t.infoIntroduce.substr(0, 16) + '...'):'');
								break
							case 2:
								if (this.stayList.length + list.length > total || list.length == 0) return this.isOver = true;
								this.stayList = [...this.stayList, ...list];
								break
							case 3:
								if (this.foodList.length + list.length > total || list.length == 0) return this.isOver = true;
								this.foodList = [...this.foodList, ...list];
								this.foodList.forEach((item, index) => {
									item.generalSpot.score = parseInt(item.generalSpot.score)
								})
								break
							case 11:
								if (this.shopList.length + list.length > total || list.length == 0) return this.isOver = true;
								this.shopList = [...this.shopList, ...list];
								break
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}

				})
			},
			addPort() {
				const index = this.travelValue
				const foodIndex = this.foodValue
				const stayIndex = this.stayValue
				const shopIndex = this.shopValue

				let arr = []
				let foodeArr = []
				let stayArr = []
				let shopArr = []
				index.forEach(i => {
					arr.push(this.travelList[i])
				})
				foodIndex.forEach(i => {
					foodeArr.push(this.foodList[i])
				})
				stayIndex.forEach(i => {
					stayArr.push(this.stayList[i])
				})
				shopIndex.forEach(i => {
					shopArr.push(this.shopList[i])
				})
				// console.log(...arr,'0000000++++++');
				// this.$store.commit('appendTravelList', ...arr)
				this.wholeSelected = [...arr, ...foodeArr, ...stayArr, ...shopArr]

				// this.getOpenerEventChannel().emit('pushScenicSpotList', {
				// 	form: this.travelSelected
				// });
				console.log(this.wholeSelected, 'this.wholeSelected');
				this.wholeSelected.forEach(w=>{
					if(!w.generalSpot.name) w.generalSpot.name = w.name;
				})
				this.getOpenerEventChannel().emit('addSuccess', this.wholeSelected);
				uni.navigateBack({
					url: '/pagesTrip/custom-travel/routeDetail',
				})
			},
			selectedItem(item, target) {
				var newArr = []
				item.forEach(i => {
					newArr.push(target[i])
				})
				return newArr
			}
		},
		watch: {
			value: {
				immediate: true,
				handler(newV) {
					if (newV && newV > 0) {
						this.disabled = false
					} else {
						this.disabled = true
					}
				}
			},
			foodSelected: {
				immediate: true,
				handler(newV) {
					if (newV && newV.length > 0) {
						this.disabled = false
					} else {
						this.disabled = true
					}
				}
			},
			staySelected: {
				immediate: true,
				handler(newV) {
					if (newV && newV.length > 0) {
						this.disabled = false
					} else {
						this.disabled = true
					}
				}
			},

		}
	}
</script>
<style scoped lang="scss">
	.zwrzsh{
		display: flex;
		align-items: center;
		justify-content: center;
		padding-top: 300rpx;
		font-size: 26rpx;
		color: #111;
	}
	
	.uni-page-head {
		z-index: 1;
	}

	/deep/.u-checkbox-group {
		padding: 0 23rpx;
		padding-bottom: 300rpx;
	}


	.searchCondition {

		width: 100%;
		position: relative;
		display: flex;
		flex-direction: row;
		justify-content: space-evenly;
		margin-top: 15rpx;

		.item {
			width: 30%;
			height: 64rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			text-align: center;
			// align-content: center;
			line-height: 64rpx;

			// display: flex;
			// justify-content: space-evenly;
			image {
				width: 28rpx;
				height: 24rpx;
				margin-right: 10rpx;
			}
		}

		.itemSelected {
			border: 1rpx solid #3CA396;
			color: #3CA396;
		}
	}

	.badge {
		position: relative;

		.u-badge--error {
			transform: translate(-540rpx, -2rpx);
			position: absolute;
		}
	}

	.badge1 {
		position: relative;

		.u-badge--error {
			transform: translate(-300rpx, -2rpx);
			position: absolute;
		}
	}

	.badge2 {
		position: relative;

		.u-badge--error {
			transform: translate(-80rpx, -2rpx);
			position: absolute;
		}
	}

	.areaBox {
		.tit {
			font-size: 32rpx;
			color: #333;
			text-align: center;
			margin-bottom: 40rpx;
			margin-top: 64rpx;
		}

		.area {
			padding: 0 24rpx 40rpx;
			background-color: #fff;
			display: grid;
			gap: 40rpx 26rpx;
			grid-template-columns: auto auto auto auto;
			margin-bottom: 44rpx;

			text-align: center;

			text {
				background-color: #F5F8FA;
				border-radius: 16rpx;
				font-size: 24rpx;
				color: #666;
				height: 64rpx;
				line-height: 64rpx;
				box-shadow: 0 5px 10px rgba(0, 0, 0, 0.08);

				&.on {
					background-image: linear-gradient(to right, #0EBFFE, #00D3E8);
					color: #fff;
				}
			}
		}

		.btns {
			display: grid;
			padding: 0 30rpx 40rpx;
			gap: 0 20rpx;
			grid-template-columns: auto auto;

		}
	}

	.page {
		padding-bottom: 200rpx;
		background: #F7F9FC;
		height: 117vh;
		// padding-top: 130rpx;


		.search {
			background: #fff;
			padding: 57rpx 26rpx 27rpx;


			.box {
				width: 100%;
				height: 64rpx;
				background: #F5F8FA;
				border-radius: 32rpx;
				display: flex;
				align-items: center;

				.ss {
					width: 28rpx;
					height: 28rpx;
					margin-left: 24rpx;
				}

				input {
					border: none;
					outline: none;
					width: calc(100% - 150rpx);
					height: 30rpx;
					font-size: 24rpx;
					color: #111111;
					margin-left: 20rpx;

					&::placeholder {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
					}
				}

				.qc {
					width: 30rpx;
					height: 30rpx;
					margin-left: 24rpx;
				}
			}
		}
	}

	.list {
		display: flex;
		flex-direction: row;
		height: 200rpx;
		border-radius: 20rpx;
		background: #FFFFFF;
		align-items: center;
		margin-top: 30rpx;
		padding: 29rpx 11px;
		box-sizing: border-box;

		.price {
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			align-items: center;
			margin-left: 44rpx;
			color: #0EBFFE;

			.u-icon {
				margin: auto;
			}



		}

	}

	.right {
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding-left: 20rpx;
		width: 65%;

		.p1 {
			color: #111111;
			font-size: 32rpx;
		}

		.p2 {
			font-size: 24rpx;
			color: #777;

			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;

			.price1 {
				font-size: 24rpx;
				font-family: PingFang SC-Heavy, PingFang SC;
				font-weight: 400;
				color: #999999;

				span:nth-child(1) {
					color: red;
				}

				span:nth-child(2) {
					color: red;
					font-weight: 800;
					font-size: 30rpx;
				}
			}

			.forFree {
				font-size: 24rpx;
				font-family: PingFang SC-Heavy, PingFang SC;
				font-weight: 400;
				color: #999999;
				span{
					color: red;
					font-weight: 800;
					font-size: 28rpx;
				}
			}
		}

		.p3 {
			display: flex;
			justify-content: space-between;
			flex-direction: row;

			.intro {
				display: inline-block;
				font-size: 24rpx;
				color: #777;

				width: 80%;
				overflow: hidden;
				text-overflow: ellipsis;

				word-break: break-all;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;

			}

			.price {
				height: 100%;
				width: 20%;
				display: flex;
				flex-direction: column;
				align-items: center;
				color: #007A69;
			}
		}

		.p4 {
			font-size: 22rpx;
			color: #AAAAAA;

			text {
				font-size: 38rpx;
				color: #FF4141;
				margin-right: 4rpx;
			}
		}
	}

	.right1 {
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding-left: 20rpx;
		width: 65%;

		.p1 {
			color: #111111;
			font-size: 32rpx;
		}

		.p2 {
			font-size: 24rpx;
			color: #777;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;

			.price1 {
				font-size: 24rpx;
				font-family: PingFang SC-Heavy, PingFang SC;
				font-weight: 400;
				color: #999999;
			}

			.forFree {
				font-size: 24rpx;
				font-family: PingFang SC-Heavy, PingFang SC;
				font-weight: 400;
				color: #999999;
			}
		}

		.p3 {
			display: flex;
			justify-content: space-between;
			flex-direction: row;

			.intro {
				display: inline-block;
				font-size: 24rpx;
				color: #777;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			.price {
				height: 100%;
				width: 28%;
				display: flex;
				flex-direction: column;
				align-items: center;
				color: #007A69;
			}
		}

		.p4 {
			font-size: 22rpx;
			color: #AAAAAA;

			text {
				font-size: 38rpx;
				color: #FF4141;
				margin-right: 4rpx;
			}
		}
	}


	.right2 {
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding-left: 20rpx;
		width: 65%;

		.p1 {
			color: #111111;
			font-size: 32rpx;
		}

		.p2 {
			font-size: 24rpx;
			color: #777;

			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;

			.price1 {
				font-size: 24rpx;
				font-weight: 400;
				color: #999999;
			}

			.forFree {
				font-size: 24rpx;
				font-family: PingFang SC-Heavy, PingFang SC;
				font-weight: 400;
				color: #999999;
			}
		}

		.p3 {
			display: flex;
			justify-content: space-between;
			flex-direction: row;

			.intro {
				display: inline-block;
				font-size: 24rpx;
				color: #777;
				overflow: hidden;
				text-overflow: ellipsis;

				word-break: break-all;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;


				width: 153%;

			}

			.price {
				height: 100%;
				width: 51%;
				display: flex;
				flex-direction: column;
				align-items: center;
				color: #007A69;
			}
		}

		.p4 {
			font-size: 22rpx;
			color: #AAAAAA;

			text {
				font-size: 38rpx;
				color: #FF4141;
				margin-right: 4rpx;
			}
		}
	}

	.operation {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;
		height: 9%;
		position: fixed;
		bottom: 0;
		width: calc(100% - 64rpx);
		z-index: 10;
		box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.06);
		padding: 0 32rpx;

		view {
			font-size: 24rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;
		}

		/deep/.u-button--large {
			height: 88rpx;
			width: 219rpx !important;
			margin: 0;
		}

	}
</style>